<template>
	<view class="content">
		<view class="title">{{ title[type] }}</view>
		<view v-if="type == 1" v-html="formatRichText(info.buycontent)"></view>
		<view v-if="type == 2" v-html="formatRichText(info.repaircontent)"></view>
		<view v-if="type == 3" v-html="formatRichText(info.agtcontent)"></view>
		<view v-else v-html="formatRichText(info.articlecontent)"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 1,
			title: {
				1: '服务条款',
				2: '旧机回收协议',
				3: '购机必读',
				4: '回收必读'
			},
			info: {
				buycontent: '',
				repaircontent: '',
				agtcontent: '',
				articlecontent: ''
			}
		};
	},
	onLoad: function (option) {
		this.type = option.type;
		this.getInfo();
	},
	methods: {
		async getInfo() {
			let data = await this.$api.request('/base/getagreement', 'GET');
			if (!data) return;
			this.info = data;
		},
		formatRichText(html) {
			//控制小程序中图片大小
			let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
				console.log(match.search(/style=/gi));
				if (match.search(/style=/gi) == -1) {
					match = match.replace(/\<img/gi, '<img style=""');
				}
				return match;
			});

			newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; ');
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			return newContent;
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background: #f5f5f5;
	margin: 0 30rpx;
	padding: 30rpx 20rpx;
	border-radius: 12rpx;
}
.title {
	font-size: 32rpx;
	font-weight: 600;
	text-align: center;
	margin-bottom: 10rpx;
}
</style>
